<template>
	<div class="indexHome">
		<top></top>
		<div class="main">
			<banner></banner>
			<page-title><span class="">{{LangSet(['金庫','BANK'])}}</span></page-title>
			<page-tip strEnd="bank"><span class="c-red">{{pageTips.tip1[lp]}}</span></page-tip>

			<!--数据-->
			<div class="assets" v-cloak>
				<div class="box">

					<div class="data">
						<b>
							{{LangSet(['總投注量','Total Betting'])}}
							<el-popover placement="top-end" title="" width="200"  trigger="hover" :content="LangSet(['所有遊戲歷史投註總量','Total historical bets for all games'])">
								<i class="f18 el-icon-question" slot="reference"></i>
							</el-popover>
						</b>
						<p class="">{{xgv.totalSupply|tofix(6)}} USDT</p>
					</div>
				</div>

				<div class="box">
					<!-- <div class="image"><img src="/images/icon_XG.png" alt=""></div> -->
					<div class="data">
						<b>
							{{LangSet(['總銷燬量','Total Burned'])}}
							<el-popover placement="top-end" title="" width="200"  trigger="hover" :content="LangSet(['遊戲挖礦销毁+回购销毁','Game mined burned + buyback burned'])">
								<i class="f18 el-icon-question" slot="reference"></i>
							</el-popover>
						</b>

						<p class="">{{(totalBurned)|tofix(xg.decimal)}}</p>
					</div>
				</div>
			</div>

			<!--表格数据-->
			<div class="data-table" style="" v-show="total>0">
				<div class="t-row th hidden-xs">
					<div class="cell">交易txid</div>
					<div class="cell">数量</div>
					<div class="cell">时间</div>
					<div class="cell">操作</div>
				</div>
				<div class="t-row td" v-for="item in tableData" :key="item.address" v-cloak="">
					<div class="cell addr">{{item.address|token(15)}}</div>
					<div class="cell amount">{{item.amount}}</div>
					<div class="cell time">{{item.createTime}}</div>
					<div class="cell op">
						<a :href="'https://tronscan.io/#/transaction/'+item.address" class="c-fff" target="_self">详情></a>
					</div>
				</div>
			</div>

			<div class="mt20 center" v-show="total>pageSizeLocal">
				<a href="" class="c-fff" target="_blank">查看更多</a>
			</div>

		</div>
		<!--main 结束 -->
		<footter color="white"></footter>
	</div>
</template>

<script type="text/javascript">

	/*加载资源*/
	import { mixins } from '@/mixins/mixins' //公共混入
	import { mixinsUtils } from '@/mixins/mixins.utils' //公共混入

	/*组件*/
	import top from '@/components/top.vue'
	import footter from "@/components/footer.vue"
	import banner from '@/components/banner.vue'
	import pageTip from '@/components/pageTip.vue'
	import pageTitle from '@/components/pageTitle.vue'
	import { dev, hex2Num, INITDATA_TIME_LIMIT, totalBurned, totalSupply } from '@/libs/tron.lib'

	export default {
		name:"bank",
		components: { top,footter,banner,pageTip,pageTitle },
		mixins:[mixins,mixinsUtils],
		data () {
			return {
				pageTips: {
					tip1: ['第壹次回購銷毀', '']
				},
				//注意，这个就叫xgv
				xgv:{
					token:"TDtKxMYXK41HrxmY1iW2ppBcPdZkdEYWcD",
					decimal:6,
					totalSupply: 0
				},
				totalBurned: 0,
				tableData: [
					{ amount:'300.0000',createTime:'2020-11-19 00:06:00',address:'044284063265a09880d0fa964745c9046360a0c2a77ae4f5c8c31f01a4b5447f' },
				],
				//请求数据控制
				total: 1, //每次请求返回的数量量
				pageSizeLocal: 10, //本地分页的每页数
				pageSizeSend: 200, //请求数据的每页数量
				page: 1, //当前第几页, 没用到。
			};
		},
		created () {

		},
		mounted () {
			let that = this

			//创建监听事件
			this.$root.eventHub.$on('loadInitData',() => {
				// debug && this.$notify({ title: '定时器', message: '重新加载数据...' ,duration:2000 })
				this.initData();
			})

			//延迟初始化数据，否则tronWeb未初始化，方法会报错
			window.setTimeout(() => {
				that.initData()
			},INITDATA_TIME_LIMIT)
		},
		methods:{
			//改变每页数量
			handleSizeChange (val) {
				console.log(`每页 ${val} 条`);
			},

			//初始化数据, 如果tronweb未初始化会报错，这里使用try-catch来好看点
			initData () {
				let that = this
				console.log('读取本页的默认数据')
				try {
					if (tronWeb) {
						this.loadData()
					}
				} catch (e) {
					console.error('tronweb可能还没初始化...' + e)
					window.setTimeout(() => {
						that.initData()
					}, INITDATA_TIME_LIMIT)
				}

			},

			//加载数据
			loadData () {
				let that = this
				totalSupply(that.xgv.token, that.sender, (rsp) => {
					that.xgv.totalSupply = hex2Num(rsp, that.xgv.decimal);

				});
				totalBurned(that.xg.address, that.sender, (rsp) => {
					that.totalBurned = hex2Num(rsp, that.xg.decimal);
				});

			}
		}
	};
</script>

<style lang="less" scoped>
	/*公共变量*/
	@import '~@/assets/global.less';

	/*资产数据*/
	.assets {
		max-width: 1100px;margin: 0px auto;padding: 40px 0px;
		display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;
		.box {
			width: 48%;margin: 0px 0.5vw 40px;padding: 45px;background: #fff;border-radius: 30px;
			box-shadow: 5px 5px 10px rgba(17, 17, 47, 0.1);display: flex;align-items: center;
			.image {}
			.image img {height: 70px;}
			.data {margin-left: 30px;}
			.data b {color: #5a7fd8;font-size: 20px;font-weight: bold;}
			.data p {color: #717377;font-size: 32px;font-weight: bold;margin-top: 5px;font-family: "Montserrat,sans-serif,Milibusmy"}
		}
	}

	/*表格*/
	.data-table {color:#fff;max-width:1000px;margin:0px auto;border-radius:5px;background-color: rgba(0,0,0,0.3);
	}
	.data-table .th,.data-table .td {/*统一设置*/

		font-size:16px;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);
		display:flex;align-items: center;justify-content: space-between;
	}
	.data-table .th {
		font-size: 16px;font-weight: bold;background-color: rgba(255,255,255,0.1);
	}
	.data-table .th .cell{}
	.data-table .td {}
	.data-table .td:hover {background-color: rgba(0,0,0,0.5);}
	.data-table .td .cell{}
	.data-table .cell:nth-child(1){flex:6}
	.data-table .cell:nth-child(2){flex:2}
	.data-table .cell:nth-child(3){flex:3}
	.data-table .cell:nth-child(4){flex:1}

	/**********************适应************************/
	@media screen and (max-width: @MINSCREEN) {
		/*资产*/
		.assets {
			max-width: 1100px;margin: 0px auto;padding: 20px 0px;display: block;
			.box {
				width: 100%;margin: 0px 0vw 10px;padding: 20px;background: #fff;border-radius: 10px;
				box-shadow: 3px 3px 10px rgba(17, 17, 47, 0);display: flex;align-items: center;
				.image {}
				.image img {height: 50px;}
				.data {margin-left: 20px;}
				.data b {font-size: 16px;}
				.data p {font-size: 18px;margin-top: 5px;}
			}
		}

		/*表格*/
		.data-table {}
		.data-table .th,.data-table .td {
			font-size:14px;padding:10px;display:block;
		}
		.data-table .td {}
		.data-table .td .cell{}
		.data-table .td .cell.amount{}
		.data-table .td .cell.amount:before{content: '数量：'}
		.data-table .td .cell.addr{}
		.data-table .td .cell.time{}
		.data-table .td .cell.time:before{content: '时间：'}
		.data-table .td .cell.op{text-align: right;}
	}
</style>
